<template>
  <div>
    <div :class="{ showmengc: showmengc }" @click="clickmengc"></div>
    <div>
      <h1>数组的使用</h1>
      <div class="style">
        <div v-for="item in list" :key="item">
          {{ item.id }}
        </div>
      </div>
      <h1>弹性布局：左边固定右边自适应</h1>
      1、
      <div class="style">
        <div class="one">左边设置宽度100px</div>
        <div class="two">右边设置flex-grow=1</div>
      </div>
      2、position:外层position:relative
      <div class="style2">
        <div class="one2">左边固定position:absult,给宽度</div>
        <div class="one3">11wewq</div>
      </div>
      3、
      <div class="style">
        <div class="one4">左边固定</div>
        <div class="two4">右边auto</div>
      </div>
      <h1>弹性布局：居中</h1>
      1、不给宽高
      <div class="style1">
        <div class="one1">11</div>
      </div>
      2、span
      <div class="centerdiv1">
        <span class="center1"> 行内元素line-hegiht=height</span>
      </div>
      3、img
      <div class="centerimg1">
        点击图片会出现蒙层
        <img src="../../assets/logo.png" alt="" class="img" @click="clickImg" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [{ id: 12 }, { id: 34 }],
      showmengc: false,
    };
  },
  methods: {
    clickmengc() {
      this.showmengc = false;
    },
    clickImg() {
      this.showmengc = true;
    },
    getList() {
      let array = this.list;
      let array1 = this.list;
      array.push({ id: 45 }); //在结尾新增一个数组元素
      // console.log(array);
      array.pop(); //删除数组最后一个，弹出
      let aee = array.concat(array1); //连接两个数组，合并数组
      // console.log(aee);
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang='scss'  scoped>
.showmengc {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: absolute;
  z-index: 100000;
  top: 0;
  left: 0;
  color: #fff;
  /* opacity: 0.7; */
}
.style {
  display: flex;
  .one {
    height: 20px;
    width: 200px;
    color: red;
    background: blue;
  }
}
.two {
  height: 20px;
  /* width: auto; */
  flex-grow: 1;
  color: red;
  background: burlywood;
}
.style1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: chartreuse;
}
.one1 {
  background: chartreuse;
}
.style2 {
  position: relative;
}
.one2 {
  position: absolute;
  left: 0px;
  width: 400px;
  background: red;
}
.one3 {
  background-color: green;
}
.one4 {
  width: 300px;
  background: cornflowerblue;
}
.two4 {
  background: rgb(223, 101, 101);
  width: auto;
}
.centerdiv1 {
  height: 60px;
  background: #9292c7;
}
.center1 {
  line-height: 60px;
}
.centerimg1 {
  height: 300px;
  position: relative;
}
.img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>